<template>
  <div class="" style="text-align: right">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="路径">
        <el-input
          v-model="lujing"
          placeholder=""
          size="normal"
          clearable
          @change="1"
          style="width: 300px;"
        ></el-input>
        &nbsp;
        <!-- <input type="file" id="file" hidden @change="fileChange" webkitdirectory /> -->
        <el-button type="success" @click="getopenfile"> 选择路径 </el-button>
      </el-descriptions-item>
      <el-descriptions-item label="缺省时间">
        <el-date-picker v-model="queshengshijian" type="date" placeholder="" />
      </el-descriptions-item>
      <el-descriptions-item label="缺省描述">
        <el-input
          v-model="queshengmiaoshu"
          placeholder=""
          size="normal"
          clearable
          @change="1"
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="操作">
        <div class="fr" style="align-items: center;">
          <el-button type="primary" size="" @click="getDirList()"
            >读取目录</el-button
          >
          &nbsp; &nbsp;
          <el-alert
            style="width: 300px"
            :title="
              '总大小：' +
              resdata.data.size +
              '/总文件个数：' +
              resdata.data.filelist.length
            "
            type="success"
            :closable="false"
          />
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-table :data="mulutabledata" border stripe height="300">
      <el-table-column type="index" width="70" label="序号" />
      <el-table-column prop="lujing" label="路径"> </el-table-column>
      <el-table-column prop="daxiao" label="大小"> </el-table-column>
      <!-- <el-table-column prop="lujing" label="路径"> </el-table-column>
      <el-table-column prop="daxiao" label="大小"> </el-table-column> -->
      <!-- <el-table-column prop="fenbianlv" label="分辨率"> </el-table-column> -->
      <el-table-column prop="shijian" label="时间">
        <template #default="scope">
          <el-date-picker v-model="scope.row.shijian" type="date" placeholder="" />
        </template>
      </el-table-column>
      <el-table-column prop="shijian" label="描述">
        <template #default="scope">
          <el-input
            v-model="scope.row.miaoshu"
            placeholder=""
            size="normal"
            clearable
            @change="1"
            style=""
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="caozuo" label="操作" width="100">
        <template #default="scope">
          <el-button type="" size="small" @click="removeitem(scope)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="" size="default" @click="emits('update:showLujingDialog', false)" style="margin-top: 10px">取消</el-button>
    <el-button type="" size="" @click="diaOK()" style="margin-top: 10px"
      >提交</el-button
    >
  </div>
</template>
<script setup>
import { reactive, ref, defineProps, defineEmits } from "vue";

import { apiList } from "@/api/apiList";
import { ElMessage } from "element-plus";

let resdata = reactive({
  data: {
    size: 0,
    filelist: [],
  },
});

let props = defineProps({
  showLujingDialog: Boolean,
});

const emits = defineEmits(["update:showLujingDialog", 'ploadData']);

function getopenfile(params) {
  // getOpenfile
  apiList.getOpenfile().then(res => {
    if (res.data == "") return;
    lujing.value = res.data
  })
  // mulutabledata.value.splice(params.$index, 1);
}

function removeitem(params) {
  mulutabledata.value.splice(params.$index, 1);
}

function diaOK() {

  let params = {
    datalist: mulutabledata.value,
    dirpath: lujing.value,
    daxiao: resdata.data.size,
  }

  apiList.submitdir(params).then(res => {
    emits('update:showLujingDialog',false)
    emits('ploadData')
    ElMessage.success("提交成功")
  })

}

function fileChange(e) {
  try {
    const fu = document.getElementById("file");
    if (fu == null) return;
    // this.form.imgSavePath = fu.files[0].path
    lujing.value = fu.files[0].path;
    console.log(fu.files[0].path);
  } catch (error) {
    console.debug("choice file err:", error);
  }
}
function btnChange() {
  var file = document.getElementById("file");
  file.click();
}

function getDirList(params) {

  apiList.getDirList(encodeURIComponent(lujing.value)).then(res => {
    let res_arr = res.data.filelist.map(item => {
      return {
        lujing: item.filepath,
        filename: item.filename,
        daxiao: item.size,
        shijian: queshengshijian.value,
        miaoshu: queshengmiaoshu.value,
      };
    });

    mulutabledata.value = res_arr;

    resdata.data = res.data;
  });
}

let lujing = ref("");
let queshengshijian = ref("");
let queshengmiaoshu = ref("");

lujing.value = "C:\\zxn\\wp\\all3";
queshengshijian.value = "2025-02-10";
queshengmiaoshu.value = "测试";

let mulutabledata = ref([
]);
</script>
<style lang="scss" scoped></style>
